<template>
	<view class="content">
		<form action="">
			<div class="input ">
				<image src="../../static/images/icon/gantanhao.png" mode=""></image>
				<text>您正在修改用户为132 3625 2512的密码</text>
			</div>
			<div class="input">
				<label for="phone">手机号码</label>
				<input v-model="phone" id="phone" type="text" placeholder="请输入手机号码" placeholder-style="color:#ccc;" />
			</div>
			<div class="input">
				<label for="">原密码</label>
				<input type="text" placeholder="请输入原密码" placeholder-style="color:#ccc;" />
			</div>
			<div class="input">
				<label for="">新密码</label>
				<input v-model="newpassword" type="text" placeholder="请输入新密码" placeholder-style="color:#ccc;" />
			</div>
			<div class="input">
				<label for="">确认密码</label>
				<input type="text" placeholder="再次输入新密码" placeholder-style="color:#ccc;" />
			</div>
			<div class="input">
				<label for="dx">短信验证码</label>
				<input type="text" id="dx" placeholder="请输入短信验证码" placeholder-style="color:#ccc;" />
				<label v-if="flag" @tap='send' for="" style="color: red;">获取验证码</label>
				<text class="time" v-else>请在{{number}}秒后发送</text>
			</div>

			<div class="input">
				<label for="tx">图形验证码</label>
				<input type="text" id="tx" placeholder="请输入图形验证码" placeholder-style="color:#ccc;" />
				<label @tap="change">M8K2</label>
			</div>


			<div class="btn">
				<button :style="{backgroundColor:bg}">确定</button>
			</div>

		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: "132 3625 2512",
				bg: 'red',
				newpassword: "",
				flag: true,
				number: 10,
				timer: null
			}
		},
		methods: {
			//发送短信事件
			send() {
				this.flag = false,
					uni.showToast({
						title: '获取成功'
					});
				this.timer = setInterval(() => {
					if (this.number !== 0) {
						this.number--
					} else {
						this.flag = true
						this.number = 10
						clearInterval(this.timer)
					}
				}, 1000)
			}, //获取验证码
			//数字变化
			change() {

			},
			iskong() {
				if (this.phone == '') {
					this.bg = '#F27F88'
				} else {
					this.bg = 'red'
				}
			}
		},
		watch: {
			// phone(n, o) {
			// 	if (n !== '') {
			// 		this.bg = 'red'
			// 	} else {
			// 		this.bg = '#F27F88'
			// 	}
			// }
		},
		beforeDestroy() {
			clearInterval(this.timer) //
		},
		updated(){
			this.iskong()
		}
	}
</script>

<style scoped lang="less">
	.input:nth-child(1) {
		display: flex;
		padding: 30upx;
		box-sizing: border-box;
		background-color: rgba(254, 240, 241);
		image {
			width: 28upx;
			height: 29upx;
		}

		text {
			color: #e60012;
			text-indent: 0.5rem;
			font-size: 26upx;
		}
	}

	.btn {
		position: absolute;
		bottom: 0;
		box-sizing: border-box;
		width: 100%;
		padding: 30upx 30upx;
		height: 140upx;
		background-color: #fff;

		button {
			background-color: red;
			color: white;
		}
	}

	input placeholder {
		color: red;
	}

	label {
		color: #7F7F7F;
		width: 150upx;
		font-size: 30upx;
		margin-left: 30upx;
	}

	.time {
		white-space: normal;
		font-size: 25upx;
	}

	.input {
		width: 100%;
		height: 100upx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #ececec;

		input {
			margin-left: 20upx;
		}
	}

	.content {
		width: 100%;
		background-color: #fff;
	}

	page {
		background-color: #F2F1F2;
		height: 100vh;
	}
</style>
